import React from 'react';
import PropTypes from 'prop-types';
import MyECharts from '@components/my-echarts';

const ResultStat = props => {
  const { assetCount, currentAlive = 0, historyAlive = 0, unknownAlive = 0 } = props;
  const total = currentAlive + historyAlive + unknownAlive || 1;
  const currentPrecent = ((100 * currentAlive) / total).toFixed(2);
  const historyPrecent = ((100 * historyAlive) / total).toFixed(2);
  const unknownPrecent = (100 - Number(currentPrecent) - Number(historyPrecent)).toFixed(2);
  const valueMap = {
    本次探测存活: {
      number: currentAlive,
      precent: `${currentPrecent >= 100 ? 100 : currentPrecent}%`
    },
    历史探测存活: {
      number: historyAlive,
      precent: `${historyPrecent >= 100 ? 100 : historyPrecent}%`
    },
    未知状态: {
      number: unknownAlive < 0 ? 0 : unknownAlive,
      precent: `${unknownPrecent < 0 ? 0 : unknownPrecent}%`
    }
  };
  const moreThan7 = [currentAlive, historyAlive, unknownAlive].filter(i => i >= 1000000).length;
  const option = {
    color: ['#0B6FD6', '#11AB4E', '#FAAF2B'],
    tooltip: {},
    title: {
      text: assetCount,
      textStyle: {
        color: '#1E1F23',
        fontSize: 24
      },
      subtext: '目标总数',
      subtextStyle: {
        color: '#686C78',
        fontSize: 14
      },
      textAlign: 'center',
      top: 100,
      left: 80
    },
    series: {
      type: 'pie',
      radius: [72, 80],
      data: [
        { value: currentAlive, name: '本次探测存活' },
        { value: historyAlive, name: '历史探测存活' },
        { value: unknownAlive, name: '未知状态' }
      ],
      hoverOffset: 5,
      label: false,
      labelLine: false,
      center: [85, '50%']
    },
    legend: {
      orient: 'vertical',
      top: 35 - moreThan7 * 4,
      right: 20,
      itemGap: 24,
      formatter: e => {
        const value = valueMap[e];
        let number = value.number;
        if (number >= 1000000) {
          return `{title|${e}}\r\n{count|${number}}\r\n{precent|(${value.precent})}`;
        } else {
          return `{title|${e}}\r\n{count|${number}} {precent|(${value.precent})}`;
        }
      },
      textStyle: {
        rich: {
          title: {
            color: '#686C78',
            fontSize: 14,
            height: 24,
            lineHeight: 24
          },
          count: {
            color: '#1E1F23',
            fontSize: 16
          },
          precent: {
            color: '#1E1F23',
            fontSize: 14
          }
        }
      },
      data: [
        {
          name: '本次探测存活',
          icon: 'circle'
        },
        {
          name: '历史探测存活',
          icon: 'circle'
        },
        {
          name: '未知状态',
          icon: 'circle'
        }
      ]
    }
  };

  return <MyECharts option={option} />;
};

ResultStat.propTypes = {
  assetCount: PropTypes.number,
  currentAlive: PropTypes.number,
  historyAlive: PropTypes.number,
  unknownAlive: PropTypes.number
};

export default ResultStat;
